import { CaseConfigType } from '@shared';
import { BasicComponent } from 'case/loading/basic/basic.component';
import { GlobalComponent } from 'case/loading/global/global.component';
import { LocalComponent } from 'case/loading/local/local.component';
import { SizeComponent } from 'case/loading/size/size.component';
import { DelayComponent } from 'case/loading/delay/delay.component';

export const LoadingConfig: CaseConfigType = {
  location: 'Loading',
  description: '页面局部处于加载异步数据或正在渲染时，合适的加载效果会缓解用户焦虑。',
  description_en: `When the page is partially loading asynchronous data or rendering, appropriate loading effect will alleviate the user's anxiety.`,
  component: [
    {
      demo: BasicComponent,
      codePath: 'showcase/loading/basic/basic.component',
      demoTitle: '基本用法',
      demoTitle_en: 'Basic',
      demoDescription: `最简单的 loading 状态`,
      demoDescription_en: `The simplest loading state`,
    },
    {
      demo: SizeComponent,
      codePath: 'showcase/loading/size/size.component',
      demoTitle: '尺寸',
      demoTitle_en: 'Size',
      demoDescription: `默认提供 4 种尺寸，根据不同的场景使用不同的尺寸。也可自定尺寸。`,
      demoDescription_en: `4 sizes are provided by default, and different sizes are used according to different scenarios.You can also customize the size without children.`,
    },
    {
      demo: LocalComponent,
      codePath: 'showcase/loading/local/local.component',
      demoTitle: '局部加载',
      demoTitle_en: 'Local Loading',
      demoDescription: `局部加载是用在页面整体框架加载的过程中，承接在全局加载后。`,
      demoDescription_en: `Local loading is used in the process of loading the overall frame of the page, and takes over after global loading.`,
    },
    {
      demo: DelayComponent,
      codePath: 'showcase/loading/delay/delay.component',
      demoTitle: '延迟加载',
      demoTitle_en: 'Delay Loading',
      demoDescription: `延迟显示 loading 效果。当 loading 状态在 lvDelay 时间内结束，则不会显示 loading 状态。`,
      demoDescription_en: `Delay the loading effect. When the loading state ends within the lvDelay time, the loading state will not be displayed.`,
    },
    {
      demo: GlobalComponent,
      codePath: 'showcase/loading/global/global.component',
      demoTitle: '全局加载',
      demoTitle_en: 'Global loading',
      demoDescription: '当刷新整个页面时调用 LoadingService。',
      demoDescription_en: 'The LoadingService is called when the entire page is refreshed.',
    },
  ],
  selector: 'lv-loading',
  snippet: ``,
  mApi: [
    {
      name: 'lv-loading',
      name_en: 'lv-loading',
      api: [
        {
          attribute: 'lvDelay',
          type: 'number',
          default: '0',
          description: '延迟显示 loading 效果，单位为毫秒',
          description_en: 'Delay display of loading effect, unit is milliseconds',
        },
        {
          attribute: 'lvLoading',
          type: 'boolean',
          default: 'false',
          description: '是否显示loading',
          description_en: 'Whether to display loading',
        },
        {
          attribute: 'lvLoadingText',
          type: 'string',
          default: 'Loading...',
          description: '加载文本',
          description_en: 'Loading the text',
        },
        {
          attribute: 'lvMask',
          type: 'boolean',
          default: 'true',
          description: '是否显示遮罩',
          description_en: 'Whether to display the mask',
        },
        {
          attribute: 'lvSize',
          type: '\'mini\' | \'small\' | \'medium\' | \'default\' | number',
          default: 'default',
          description: '组件图标大小',
          description_en: 'Component icon size',
        },
      ],
    },
    {
      name: 'LoadingService',
      name_en: 'LoadingService',
      api: [
        {
          attribute: 'options',
          type: 'object',
          default: '--',
          description: '设置当前loading的配置参数，具体见下方表格',
          description_en: '',
        },
      ],
    },
    {
      name: 'options',
      name_en: 'options',
      api: [
        {
          attribute: 'text',
          type: 'string',
          default: 'Loading...',
          description: '加载文本',
          description_en: 'Loading the text',
        },
        {
          attribute: 'size',
          type: '\'mini\' | \'small\' | \'medium\' | \'default\' | number',
          default: 'default',
          description: '组件图标大小',
          description_en: 'Component icon size',
        },
      ],
    },
  ],
};
